<template>
  <a-select
    v-if="isEdit && column.isSimple && column.options"
    :options="column.options"
    :value="value"
    @change="handleSelectChange"
  >
  </a-select>
  <a-input
    v-else-if="isEdit"
    :value="value"
    @change="handleChange"
  ></a-input>
  <div
    class="text highlight"
    v-else
    @click="edit"
  >
    {{ findOptionLabel(value) }}
  </div>
</template>
<script>
export default {
  name: 'EditCell',
  props: {
    text: [String, Number],
    column: Object,
    record: Object,
  },
  data() {
    return {
      value: this.text,
      isEdit: true,
    }
  },
  watch: {
    text(newVal) {
      this.value = newVal
    },
  },
  methods: {
    handleChange(e) {
      this.value = e.target.value
      this.$emit('change', this.value)
    },
    handleSelectChange(value) {
      this.value = value
      this.isEdit = false
      this.$emit('change', this.value)
    },
    findOptionLabel(value) {
      if (this.column.isSimple && this.column.options) {
        return this.column.options.find((item) => item.value === value).label
      } else {
        return value
      }
    },
    edit() {
      this.isEdit = true
    },
  },
}
</script>
<style scoped>
::v-deep .ant-input {
  border-radius: 0px;
}
.ant-select {
  width: 100%;
}
.text {
  background: #fff;
  height: 30px;
  line-height: 30px;
  text-align: left;
  padding: 0 10px;
}
.highlight {
  background: #f2f0d7;
  color: #f37221;
}
</style>